<template>
  <div>
    <el-row>
      <el-col :span="24">
        <Head :user="user" @showUserInfo="showUserInfo"></Head>
      </el-col>
    </el-row>
    <el-row class="tac">
      <el-col :span="4">
        <el-menu default-active="2" router class="el-menu-vertical-demo">
          <el-menu-item index="car">
            <i class="el-icon-setting"></i>
            <span slot="title">车辆管理</span>
          </el-menu-item>
          <el-menu-item index="task" v-if="user.role && user.role == 1">
            <i class="el-icon-setting"></i>
            <span slot="title">员工任务管理</span>
          </el-menu-item>
          <el-menu-item index="material_log">
            <i class="el-icon-setting"></i>
            <span slot="title">维修材料管理</span>
          </el-menu-item>
          <el-menu-item index="check" v-if="user.role && user.role == 2">
            <i class="el-icon-setting"></i>
            <span slot="title">质检任务</span>
          </el-menu-item>
          <el-menu-item index="money">
            <i class="el-icon-setting"></i>
            <span slot="title">消费结算</span>
          </el-menu-item>
          <el-menu-item index="material">
            <i class="el-icon-setting"></i>
            <span slot="title">配件管理</span>
          </el-menu-item>
        </el-menu>
      </el-col>
      <el-col :span="20">
        <router-view />
        <el-dialog
          title="修改个人信息"
          :visible.sync="isUserInfoShow"
          width="30%"
          @close="isUpdateUser = false"
        >
          <el-form
            :model="updateUserForm"
            ref="form"
            label-width="80px"
            :inline="false"
            size="normal"
          >
            <el-form-item label="用户名">
              <el-input
                v-model="updateUserForm.username"
                :disabled="!isUpdateUser"
              ></el-input>
            </el-form-item>
            <el-form-item label="密码" v-if="isUpdateUser">
              <el-input
                type="password"
                v-model="updateUserForm.password"
              ></el-input>
            </el-form-item>
            <el-form-item label="身份">
              <el-select
                v-model="updateUserForm.role"
                value-key="value"
                filterable
                :disabled="!isUpdateUser"
              >
                <el-option
                  v-for="item in roleList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="创建时间">
              <el-input v-model="user.createTime" :disabled="true"></el-input>
            </el-form-item>
          </el-form>
          <span slot="footer">
            <el-button @click="isUserInfoShow = false">关闭</el-button>
            <el-button
              type="primary"
              @click="isUpdateUser = true"
              v-if="!isUpdateUser"
              >修改个人信息</el-button
            >
            <el-button type="primary" @click="updateUser" v-if="isUpdateUser"
              >确认修改</el-button
            >
          </span>
        </el-dialog>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Head from "../components/Head.vue";

export default {
  name: "Admin",
  components: {
    Head,
  },
  data() {
    return {
      user: {},
      updateUserForm: {
        id: "",
        username: "",
        password: "",
        role: "",
      },
      roleList: [
        { label: "维修员", value: 1 },
        { label: "质检员", value: 2 },
      ],
      isUserInfoShow: false,
      isUpdateUser: false,
    };
  },
  methods: {
    findName(arr, source, targetValue = "lable", sourceValue = "value") {
      if (!Array.isArray(arr)) {
        return;
      }
      let res = arr.find((e) => e[sourceValue] === source);
      return res && res[targetValue] ? res[targetValue] : "";
    },
    showUserInfo() {
      this.isUserInfoShow = true;
      this.updateUserForm.id = this.user.id;
      this.updateUserForm.username = this.user.username;
      this.updateUserForm.password = this.user.password;
      this.updateUserForm.role = this.user.role;
    },
    updateUser() {
      this.postRequest("/user/update", this.updateUserForm).then((resp) => {
        if (resp && resp.status == 200) {
          this.user.username = this.updateUserForm.username;
          this.user.role = this.updateUserForm.role;
          localStorage.setItem("user", JSON.stringify(this.user));
          this.isUserInfoShow = false;
        }
      });
    },
  },
  created() {
    let user = JSON.parse(localStorage.getItem("user"));
    if (!user) {
      this.$router.replace("/");
    }
    this.user = user
  },
};
</script>

<style></style>
